<template>
    <div class="Preson">
    <h2>需求：当水温达到60度，或水位达到80，给服务器发起请求</h2>
    <h2>水温:{{ temp }}</h2>
    <h2>当前水位:{{ height }}</h2>
    <button @click="changeTemp">水温+10</button>
    <button @click="changeHeight">水位+10</button>
    </div>
</template>

<script lang="ts" setup>

import { watch, ref, reactive,watchEffect } from 'vue'

let temp = ref(27)
let height = ref(10)

function changeTemp() {
    temp.value += 10
}
function changeHeight() {
    height.value += 10
}
// watch监视
// watch([temp,height], (value) => {
//     // console.log(value);
//     let [newtemp, newheight] = value
//     if (newtemp >= 60 || newheight >= 80) {
//         console.log('给服务请求');

//     }
// })

// watchEffect监视
watchEffect(() => {
    if (temp.value >= 60 || height.value >= 80) {
        console.log('给服务请求');
    }
})

</script>

<style scoped>
.Preson {
    background-color: #ddd;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
}

button { 
    margin: 0 10px;
}
</style>